<template>
    <el-row class="layout">
        <el-col class="left" :span="4">
            <el-scrollbar class="left_content">
                <el-menu :default-active="index" class="el-menu-vertical-demo" background-color="rgba(0,0,0,0)"
                    text-color="#f2f2f2" active-text-color="#00aaff" router>
                    <el-menu-item index="xiaoqu" @click="onChange({ name: 'xiaoqu' })">
                        <el-icon>
                            <i class="iconfont icon-xiaoqu-xianxing"></i>
                        </el-icon>
                        <span>小区管理</span>
                    </el-menu-item>
                    <el-sub-menu>
                        <template #title>
                            <div style="display: inline-block;">
                                <el-icon>
                                    <i class="iconfont icon-qukuaidi"></i>
                                </el-icon>
                                <span>帮买取快递废品回收</span>
                            </div>
                        </template>
                        <el-menu-item-group style="background-color: #1F2D3D;">
                            <el-menu-item index="mendian" @click="onChange({ name: 'mendian' })"><el-icon>
                                    <i class="iconfont icon-mendian"></i>
                                </el-icon>门店管理</el-menu-item>
                            <el-menu-item index="yizhan" @click="onChange({ name: 'yizhan' })"><el-icon>
                                    <i class="iconfont icon-yizhan"></i>
                                </el-icon>驿站管理</el-menu-item>
                            <el-menu-item index="shangpin" @click="onChange({ name: 'shangpin' })"><el-icon>
                                    <i class="iconfont icon-shangpin"></i>
                                </el-icon>商品管理</el-menu-item>
                            <el-menu-item index="dingdan" @click="onChange({ name: 'dingdan' })"><el-icon>
                                    <i class="iconfont icon-dingdan"></i>
                                </el-icon>订单管理</el-menu-item>
                            <el-menu-item index="feipin" @click="onChange({ name: 'feipin' })"><el-icon>
                                    <i class="iconfont icon-feipin"></i>
                                </el-icon>废品回收订单</el-menu-item>
                        </el-menu-item-group>
                    </el-sub-menu>

                    <el-sub-menu index="3">
                        <template #title>
                            <div style="display: inline-block;">
                                <el-icon><i class="iconfont icon-laohu"> </i></el-icon>
                                <span>胖虎甄选</span>
                            </div>
                        </template>
                        <el-menu-item-group style="background-color: #1F2D3D;">
                            <el-menu-item index="3-1"><el-icon>
                                    <i class="iconfont icon-shangpin"></i>
                                </el-icon>商品管理</el-menu-item>
                            <el-menu-item index="3-2"><el-icon>
                                    <i class="iconfont icon-dingdan"></i>
                                </el-icon>订单管理</el-menu-item>
                            <el-menu-item index="3-3"><el-icon>
                                    <i class="iconfont icon-shouhoudingdan"></i>
                                </el-icon>售后管理</el-menu-item>
                        </el-menu-item-group>
                    </el-sub-menu>

                    <el-sub-menu index="4">
                        <template #title>
                            <div style="display:inline-block; ">
                                <el-icon><i class="iconfont icon-huoche"></i></el-icon>
                                <span>胖虎家政</span>
                            </div>
                        </template>
                        <el-menu-item-group style="background-color: #1F2D3D;">
                            <el-menu-item index="4-1"><el-icon>
                                    <i class="iconfont icon-jiazhengfuwu"></i>
                                </el-icon>家政服务</el-menu-item>
                            <el-menu-item index="4-2"><el-icon>
                                    <i class="iconfont icon-dingdan"></i>
                                </el-icon>订单管理</el-menu-item>
                            <el-menu-item index="4-3"><el-icon>
                                    <i class="iconfont icon-shouhoudingdan"></i>
                                </el-icon>售后订单</el-menu-item>
                        </el-menu-item-group>
                    </el-sub-menu>

                    <el-menu-item index="5">
                        <i class="iconfont icon-yonghuguanli "></i>
                        <span class="span">用户管理</span>
                    </el-menu-item>
                    <el-menu-item index="qishou" @click="onChange({ name: 'qishou' })">
                        <i class="iconfont icon-swticonkuaidi1"></i>
                        <span class="span">骑手管理</span>
                    </el-menu-item>
                    <el-menu-item index="7">
                        <i class="iconfont icon-jiazhengguanli"></i>
                        <span class="span">家政管理</span>
                    </el-menu-item>
                    <el-menu-item index="8">
                        <i class="iconfont icon-hongbao"></i>
                        <span class="span">新用户红包</span>
                    </el-menu-item>
                    <el-menu-item index="9">
                        <i class="iconfont icon-leimu"></i>
                        <span class="span">类目管理</span>
                    </el-menu-item>


                    <el-sub-menu index="9">
                        <template #title>
                            <div style="display: inline-block;">
                                <el-icon>
                                    <i class="iconfont icon-qukuaidi"></i>
                                </el-icon>
                                <span>jzx</span>
                            </div>
                        </template>

                        <el-menu-item-group style="background-color: #1F2D3D;">
                            <el-menu-item index="article" @click="onChange({ name: 'article' })">
                                <el-icon>
                                    <i class="iconfont icon-mendian"></i>
                                </el-icon>
                                文章管理
                            </el-menu-item>

                            <el-menu-item index="course" @click="onChange({ name: 'course' })">
                                <el-icon>
                                    <i class="iconfont icon-mendian"></i>
                                </el-icon>
                                课程管理
                            </el-menu-item>

                            <el-menu-item index="FM" @click="onChange({ name: 'FM' })">
                                <el-icon>
                                    <i class="iconfont icon-mendian"></i>
                                </el-icon>
                                FM管理
                            </el-menu-item>

                            <el-menu-item index="courseReview" @click="onChange({ name: 'courseReview' })">
                                <el-icon>
                                    <i class="iconfont icon-mendian"></i>
                                </el-icon>
                                课程评价管理
                            </el-menu-item>

                            <el-menu-item index="psychologicalAssessment" @click="onChange({ name: 'psychologicalAssessment' })">
                                <el-icon>
                                    <i class="iconfont icon-mendian"></i>
                                </el-icon>
                                心理测评管理
                            </el-menu-item>

                            <el-menu-item index="psychologicalKnowledge" @click="onChange({ name: 'psychologicalKnowledge' })">
                                <el-icon>
                                    <i class="iconfont icon-mendian"></i>
                                </el-icon>
                                心理知识管理
                            </el-menu-item>


                            <el-menu-item index="publicWelfare" @click="onChange({ name: 'publicWelfare' })">
                                <el-icon>
                                    <i class="iconfont icon-mendian"></i>
                                </el-icon>
                                公益中心管理
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-sub-menu>

                    <el-sub-menu index="11">
                        <template #title>
                            <div style="display: inline-block;">
                                <el-icon>
                                    <i class="iconfont icon-qukuaidi"></i>
                                </el-icon>
                                <span>zhy</span>
                            </div>
                        </template>
                        <el-menu-item-group style="background-color: #1F2D3D;">
                            <el-menu-item index="company" @click="onChange({ name: 'company' })">
                                <el-icon>
                                    <i class="iconfont icon-mendian"></i>
                                </el-icon>
                                公司管理
                            </el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group style="background-color: #1F2D3D;">
                            <el-menu-item index="announcement" @click="onChange({ name: 'announcement' })">
                                <el-icon>
                                    <i class="iconfont icon-mendian"></i>
                                </el-icon>
                                咨询公告管理
                            </el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group style="background-color: #1F2D3D;">
                            <el-menu-item index="consultationAppointment" @click="onChange({ name: 'consultationAppointment' })">
                                <el-icon>
                                    <i class="iconfont icon-mendian"></i>
                                </el-icon>
                                咨询预约管理
                            </el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group style="background-color: #1F2D3D;">
                            <el-menu-item index="homeCarousel" @click="onChange({ name: 'homeCarousel' })">
                                <el-icon>
                                    <i class="iconfont icon-mendian"></i>
                                </el-icon>
                                首页轮播图管理
                            </el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group style="background-color: #1F2D3D;">
                            <el-menu-item index="question" @click="onChange({ name: 'question' })">
                                <el-icon>
                                    <i class="iconfont icon-mendian"></i>
                                </el-icon>
                                问题管理
                            </el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group style="background-color: #1F2D3D;">
                            <el-menu-item index="reply" @click="onChange({ name: 'reply' })">
                                <el-icon>
                                    <i class="iconfont icon-mendian"></i>
                                </el-icon>
                                回复管理
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-sub-menu>
                    <el-sub-menu index="10">
                        <template #title>
                            <div style="display: inline-block;">
                                <el-icon>
                                    <i class="iconfont icon-qukuaidi"></i>
                                </el-icon>
                                <span>ytq</span>
                            </div>
                        </template>

                        <el-menu-item-group style="background-color: #1F2D3D;">
                            <el-menu-item index="consultant" @click="onChange({ name: 'consultant' })">
                                <el-icon>
                                    <i class="iconfont icon-teacher"></i>
                                </el-icon>
                                咨询师
                            </el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group style="background-color: #1F2D3D;">
                            <el-menu-item index="consultantLevel" @click="onChange({ name: 'consultantLevel' })">
                                <el-icon>
                                    <i class="iconfont icon-ercirenzheng"></i>
                                </el-icon>
                                咨询师等级
                            </el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group style="background-color: #1F2D3D;">
                            <el-menu-item index="answerLeaveWord" @click="onChange({ name: 'answerLeaveWord' })">
                                <el-icon>
                                    <i class="iconfont icon-huifuliuyan"></i>
                                </el-icon>
                                回复留言
                            </el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group style="background-color: #1F2D3D;">
                            <el-menu-item index="feeStandards" @click="onChange({ name: 'feeStandards' })">
                                <el-icon>
                                    <i class="iconfont icon-shoufeibiaozhun"></i>
                                </el-icon>
                                收费标准
                            </el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group style="background-color: #1F2D3D;">
                            <el-menu-item index="fieldOfExcellence" @click="onChange({ name: 'fieldOfExcellence' })">
                                <el-icon>
                                    <i class="iconfont icon-lingyu"></i>
                                </el-icon>
                                擅长领域
                            </el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group style="background-color: #1F2D3D;">
                            <el-menu-item index="userReview" @click="onChange({ name: 'userReview' })">
                                <el-icon>
                                    <i class="iconfont icon-pingjia"></i>
                                </el-icon>
                                用户评价
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-sub-menu>


                </el-menu>
            </el-scrollbar>
        </el-col>
        <el-col :span="20" style="padding: 20px;box-sizing: border-box; ">
            <el-row>
                <el-col :span="24">
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item v-for="item in arr" :key="item">{{ item }}</el-breadcrumb-item>
                    </el-breadcrumb>
                </el-col>
                <el-col :span="24" class="right_content">
                    <router-view></router-view>
                </el-col>
            </el-row>
        </el-col>
        <el-col></el-col>
    </el-row>
</template>

<script setup>
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const router = useRouter();
let route = useRoute();
let arr = ref([]);
console.log(route);

let index = ref(route.name)
route.matched[0].children.map((item) => {
    if (item.path == route.path.split("/")[1]) {
        arr.value = item.arr;
    }
    return item;
})
// const goToMenDian=function(){
// router.push({name:'mendian'})
// }
const onChange = function (value) {
    console.log(route);
    console.log(value);
    router.push(value);
    index.value = value.name;
    route.matched[0].children.map((item) => {
        console.log(item.name);
        if (item.name == value.name) {
            arr.value = item.arr;
        }
        return item;
    })
}
</script>

<style lang="less" scoped>
.layout {
    .left {
        .left_content {
            background-color: #304156;
            position: fixed;
            left: 0;
            top: 0;
            bottom: 0;
            width: 16.67%;

            i {
                font-size: 15px;
                margin-right: 2px;
            }

            span {
                font-size: 15px;
                margin-left: 10px;
            }
        }

        .span {
            padding: 5px;
            margin-left: 12px !important;
        }

        .el-menu-item {
            i {
                margin-left: 2px !important;
            }
        }
    }

    .right_content {
        padding: 20px 0;
        text-align: left;
    }
}
</style>